<template>
    <div class="car-wrap">
        <h1>购物车界面</h1>
        <div class="car-item"  v-for="(item,ind) in buyList" :key="ind">
            <span @click="checkFun(item)" class="check" :class="{'active':item.status}"></span>
            <dl>
                <dt>
                    <img src="../assets/logo.png" alt="">
                </dt>
                <dd>
                    <h3>{{item.title}}</h3>
                   <p>价格:{{item.price}}</p>
                   <span @click="count({num:item.num-1,id:item.id})">-</span>
                   <span>{{item.num}}</span>
                   <span @click="count({num:item.num+1,id:item.id})">+</span>
                </dd>
            </dl>
        </div>
        <div class="checkAll">
            <span class="check" :class="{'active':checkAll}" @click="allCheck"></span>
            <span>总价格：{{totalMoney}}</span>
        </div>
    </div>
</template>
<script>
import {mapState,mapMutations,mapActions,mapGetters} from 'vuex'
export default {
    data(){
        return {
            checkAll:false
        }
    },
    created(){
        this.checkAll = this.buyList.every(item => item.status);
    },
    computed:{
        ...mapState(['buyList']),
        ...mapGetters(['totalMoney'])
    },
    methods:{
        ...mapMutations(['check','count','checkAllFun']),
        checkFun(item){
            this.check(item);
            this.checkAll = this.buyList.every(item => item.status);
        },
        allCheck(){
            this.checkAll = !this.checkAll;
            this.checkAllFun(this.checkAll);
        }
    }
}
</script>
<style lang="scss">
    .car-wrap{
        width:100%;
        height:100%;
        h1{
            font-size:16px;
        }
        .car-item{
            width:100%;
            display: flex;
            align-items: center;
            dl{
                display: flex;
                align-items: center;
                dt{
                    width:80px;
                    height: 80px;
                    img{
                        width:100%;
                    }
                }
            }
            
        }
        .check{
            width:20px;
            height: 20px;
            display: block;
            border:1px solid gray;
            border-radius: 50%;
            &.active{
                background: orange;
            }
        }
    }
</style>

   
